<template>
<div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="height:580px;overflow: scroll">
        <el-tab-pane label="全部菜式" name="first">
            <div v-for="(item,index) in myData" :key="item.id">
                <el-col :span="5">
                    <div class="grid-content bg-purple">
                        <img :src="item.imgsrc" alt="" width="260" height="180">
                        <p>{{item.price}}</p>
                        <p>{{item.name}}</p>
                        <p><el-input-number v-model="item.num1" @change="handleChange" :min="0" :max="999" label="描述文字"></el-input-number></p>
                    </div>
                </el-col>
            </div>
        </el-tab-pane>
        <el-tab-pane label="热菜" name="second">
            <div v-for="(item,index) in recaidata" :key="item.id">
                <el-col :span="5">
                    <div class="grid-content bg-purple">
                        <img :src="item.imgsrc" alt="" width="260" height="180">
                        <p>{{item.price}}</p>
                        <p>{{item.name}}</p>
                        <p><el-input-number v-model="item.num1" @change="handleChange" :min="0" :max="999" label="描述文字"></el-input-number></p>
                    </div>
                </el-col>
            </div>
        </el-tab-pane>
        <el-tab-pane label="凉菜" name="third">
            <div v-for="(item,index) in liangcaidata" :key="item.id">
                <el-col :span="5">
                    <div class="grid-content bg-purple">
                        <img :src="item.imgsrc" alt="" width="260" height="180">
                        <p>{{item.price}}</p>
                        <p>{{item.name}}</p>
                        <p><el-input-number v-model="item.num1" @change="handleChange" :min="0" :max="999" label="描述文字"></el-input-number></p>
                    </div>
                </el-col>
            </div>
        </el-tab-pane>
        <el-button @click="changeBtn" type="primary" style="height:80px;right:60px;top:260px;position:fixed">
            选好菜了
        </el-button>
        <el-drawer
                title="您已选菜品"
                :visible.sync="drawer"
                :direction="direction"
                size="66%"
        >
            <el-table
                    :data="dingdandata"
                    border
                    height="400"
                    style="width: 100%">
                <el-table-column
                        prop="classify_name"
                        label="菜品类别"
                        width="280">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="菜名"
                        width="280">
                </el-table-column>
                <el-table-column
                        prop="num1"
                        label="数量"
                        width="280">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="单价">
                </el-table-column>
            </el-table>
            <el-select v-model="number" placeholder="请选择桌号" style="margin-top:10px ">
                <el-option
                        v-for="item in tableData"
                        :key="item.number"
                        :label="item.number"
                        :value="item.number"
                        >
                </el-option>
            </el-select>
           <p><button type="primary" @click="tijiao" style="padding:10px">提交菜单</button></p>
        </el-drawer>
    </el-tabs>
</div>
</template>
<script>
    import http from '../../tool/http'
export default{
    data() {
        return {
            myData:[],
            // imgsrc:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4217308309,2938603105&fm=26&gp=0.jpg"
            radio: 3,
            activeName: 'first',
            drawer: false,
            direction: 'rtl',
            // recaidata:[]
            tableData:[],
            number:'',
            tijiaodata:{}
        }
    },

    created() {
        this.getList()
   },
    methods:{
        getList(){
            return http({
                url:'/website/dishesMainController/getList',
                method: 'post',
            }).then(res => {
                console.log(res);
                for(let i=0;i++;i<=res.data.data.length){
                   res.data.data[i].num1 = 0;
                }
                this.myData = res.data.data;
            })
                .catch(err => {
                    console.log(err)
                })
        },
        handleChange(value) {
            console.log(value);
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },

        changeBtn(){
            this.drawer = true;
            // console.log(this.dingdandata)
            this.gettable()
        },
        tijiao(){
            // this.$store.dispatch('addData',this.dingdandata)
            if(this.number!=='') {
                this.tijiaodata.seats_id = this.number;
                this.tijiaodata.create_by = sessionStorage.getItem('name');
                let arr = JSON.parse(JSON.stringify(this.dingdandata).replace(/num1/g, "number"));
                let arr1=[];
                arr.filter(item=>{
                    let obj={};
                    obj.dishes_main_id=item.name
                    obj.number=item.number
                    obj.price=item.price
                    arr1.push(obj)
                })
                this.tijiaodata.list=arr1;
                console.log(arr1)
                // this.tijiaodata.list.dishes_main_id=arr.name;
                // this.tijiaodata.list.number=arr.number;
                // this.tijiaodata.list.price=arr.price;
                // console.log(this.tijiaodata)
                // this.tijiaodata.seats_id=this.number;
                http({
                    url:'/website/addOrderRequestController/addOrderRequest',
                    method: 'post',
                    data:this.tijiaodata
                }).then(res =>{
                   console.log(res)
                });
                console.log(this.tijiaodata)
                // console.log(JSON.stringify(this.dingdandata))
                this.$router.push('/toorder1')
            }
            else {
                alert('请选择桌号')
            }
        },
        gettable(){
            http({
                url:'/website/seatsController/selectSeatsByState',
                method: 'post',
                data:{state:'占用'}
            }).then(res => {
                console.log(res);
                this.tableData = res.data.data
            })
                .catch(err => {
                    console.log(err)
                })
        }
    },
    computed:{
        recaidata(){
            return this.myData.filter(item=>{
                if(item.classify_name==='热菜'){
                   return item
                }
            })
        },
        liangcaidata(){
            return this.myData.filter(item=>{
                if(item.classify_name==='凉菜'){
                    return item
                }
            })
        },
        dingdandata(){
            return this.myData.filter(item=>{
                if(item.num1!==0){
                    return item
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
    .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    .grid-content>p:last-child{
        padding-bottom: 10px;
    }
</style>